<template>
  <div class="usr">
    <div ref="chart" style="width: 100%; height: 240px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";

export default {
  name: "RectangleChart",
  computed: mapState({
    totalActualAmount: function (state) {
      return state.data.orderData.totalActualAmount;
    },
  }),
  mounted() {
    this.$nextTick(() => {
      // 确保数据加载完成后再初始化图表
      this.initChart();
    });
  },
  watch: {
    // 当数据变化时重新更新图表
    totalActualAmount(newVal) {
      this.updateChart(newVal);
    },
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);

      const option = {
        graphic: [
          // 左上角的名称
          {
            type: "text",
            left: "10%",
            top: "10%",
            style: {
              text: `累计付款金额`,
              font: "bold 18px Arial",
              fill: "#E1B76F",
            },
          },
          // 中间显示数值和单位（使用富文本）
          {
            type: "text",
            left: "30%", // 使文本的左上角位于中心
            top: "60%",
            style: {
              rich: {
                value: {
                  font: "bold 30px Arial", // 数值字体
                  fill: "#E1B76F", // 数值颜色
                },
                unit: {
                  font: "14px Arial", // 单位字体
                  fill: "#839AAC", // 单位颜色
                  verticalAlign: "bottom",
                },
              },
              text: `{value|${this.totalActualAmount || 0}} {unit|${"万元"}}`, // 数值和单位用rich样式显示
              textAlign: "left", // 水平居中
              verticalAlign: "middle", // 垂直居中
            },
          },
        ],
      };

      chart.setOption(option);
      this.chartInstance = chart; // 保存实例，方便后续更新
    },

    // 更新图表的数值
    updateChart(newData) {
      if (this.chartInstance) {
        const option = this.chartInstance.getOption();
        option.graphic[1].style.text = `{value|${newData || 0}} {unit|${"万元"}}`; // 更新数值
        this.chartInstance.setOption(option);
      }
    },
  },
};
</script>

<style scoped>
.usr {
  width: 100%;
  height: 260px;
  background-image: url("../../assets/img/bg_line.svg");
  background-size: 80% 50%; /* 设置背景图宽度和高度为100% */
  background-position: top center; /* 设置背景图居中显示 */
  background-repeat: no-repeat; /* 防止背景图重复 */
  display: inline-block; /* 容器不会因图表内容而改变大小 */
  position: relative; /* 设置相对定位 */
  box-sizing: border-box;
}
</style>
